﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DeptList.aspx.cs" Inherits="WebApplication01.DeptList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>部门管理</title>
    <link href="Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrapTable/bootstrap-table.css" rel="stylesheet" />

    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Content/bootstrapTable/bootstrap-table.js"></script>
    <script src="Content/bootstrapTable/bootstrap-table-zh-CN.js"></script>
    <script>

        $(function () {
            getData();
            $("#btnQuery").click(function () {
                Search();
            })
            $("#btnAdd").click(function () {
                $("#myModal").modal({
                    backdrop: 'static'
                })
                $("#txtDetName").val("");
                $("#txtDetReMark").val("");
                $("#hid").val("")
            })
            //提交按钮事件
            $("#btnInsert").click(function () {
                $.ajax({
                    url: "AssetHandel/DeHandler.ashx",
                    type: "post",
                    data: {
                        rName: $("#txtDetName").val(),
                        ReMark: $("#txtDetReMark").val(),
                        sType: "update",
                        ID: $("#hid").val()
                    },
                    success: function (data) {
                        if (data == "OK") {
                            alert("添加成功");
                            $("#myModal").modal("hide");
                            Search();
                        }
                        else {
                            alert("添加失败");
                        }
                    },
                })

            });
        })
        function getData() {
            $("#tblTable").bootstrapTable({
                url: "AssetHandel/DeHandler.ashx?sType=list",
                pagination: true,
                sidePagination: "server",
                striped: true,
                pageNumber: 1,
                pageSize: 5,
                pageList: [5, 10, 25, 50, 100],
                queryParams: function (params) {
                    var temp = {
                        deptName: $("#Name").val(),
                        limit: params.limit,
                        offset: params.offset
                    };
                    return temp;
                },
                columns: [
                    {
                        checkbox: true,
                    },
                    { field: 'DeptID', title: '部门ID', width: 10 },
                    { field: 'DeptName', title: '部门名称', width: 80 },
                    { field: 'DeptReMark', title: '备注', width: 80 },
                    {
                        field: '', title: '操作', width: 40, formatter: function (value, row, index) {
                            return '<button type="button" class="btn btn-warning btn-sm" onclick="Exit(' + index + ')">编辑</button>&nbsp;&nbsp;<button type="button" class="btn btn-danger" onclick="Delete(' + row.DeptID + ')">删除</button>';
                        }
                    },
                ]

            })
        }

        function Search() {
            $("#tblTable").bootstrapTable("refresh");
        }

        function Exit(index) {
            $("#myModal").modal({
                backdrop: 'static',
            })
            var data = $("#tblTable").bootstrapTable("getData");
            $("#hid").val(data[index]["DeptID"]);
            $("#txtDetName").val(data[index]["DeptName"]);
            $("#txtDetReMark").val(data[index]["DeptReMark"]);
        }
        function Delete(del) {
            if (confirm("确认删除吗？")) {
                $.ajax({
                    type: "get",
                    url: "AssetHandel/DeHandler.ashx",
                    data: { sType: "Delete", id: del },
                    success: function (value) {
                        if (value == "OK") {
                            alert("确定");
                            Search();
                        } else {
                            alert("删除失败！！！");
                        }
                    }
                })
            }
        }

    </script>
</head>
<body>
    <div class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="name">部门名称</label>
            <input type="text" class="form-control" id="Name" placeholder="请输入部门名称" />
            <button type="button" id="btnQuery" class="btn btn-primary">查询</button>
            <button type="button" id="btnAdd" class="btn btn-primary">添加</button>
            <button type="button" id="btnExcel" class="btn btn-primary">导入数据</button>
        </div>

    </div>
    <table id="tblTable"></table>

    <%-- 模态框--%>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">部门信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="txtDetName" class="col-sm-2 control-label">部门名称:</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="txtDetName"
                                    placeholder="请输入" />
                            </div>


                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" rows="3" id="txtDetReMark"></textarea>
                            </div>
                        </div>

                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                        关闭
                    </button>
                    <input id="hid" type="hidden" />
                    <button type="button" class="btn btn-primary" id="btnInsert">
                        提交更改
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>

</body>
</html>
